<template>
	<view class="myMember">
		<view class="header">
			<view class="search_box">
				<image src="../../../static/img/member/search.png"></image>
				<input type="text" v-model="searchContent" @input="search" placeholder="姓名/手机号">		
			</view>
		</view>
		
		<view class="mainContent">
			<view class="content"  v-for="(item,index) in list" :key="index">
				<view class="topBox">
					<view class="memberInformation" @click="jump(item)">
						<view>{{item.realName ? item.realName : item.userName}}</view>
						<view>12</view>
						<text>{{item.sex == 1?'( 男 )': item.sex == 2 ? '( 女 )' : '( 性别不详 )'}}</text>
					</view>
					<text class="function">
						<image src="@/static/img/homePage/chat@2x.png" @click="toImchat(item)"></image>
						<image src="@/static/img/homePage/conversation@2x.png" @click="toTell(item)"></image>
					</text>
				</view>
				<view class="bottomBox">
					<image src="@/static/img/index/defalut_tx.png" @click="jump(item)"></image>
					<view class="right">
						<view @click="jump(item)">
							<text class="alignment">编号</text>：<text class="information">{{item.sn}}</text>
						</view>
						<view @click="jump(item)">
							<text class="alignment">手机</text>：<text class="informaton">{{item.phone}}</text>
						</view>
						<view>
							<text class="alignment">健康专家</text>：
							<view class="experts">
								<view  v-for="(a,ai) in item.expertList" :key="ai" @click="jump(item)"> 
									<text v-if="ai <= 2 ">{{a.expertName}}</text>
									<text class="more" v-if="ai > 2">...</text>
								</view>
								<text class="add" @click="addExperts(item)"><image src="@/static/img/homePage/followWith@2x.png"></image>添加</text>
							</view>
						</view>
					</view>
				</view>
			</view>		
		</view>
		
		<view class="location">
			<image src="@/static/img/quickly/healthStatus/add@2x.png"  @click="addQuestion"></image>
		</view>
	</view>
</template>

<script src="@/static/js/headFeatures/member/myMember.js"></script>

<style lang="scss" scoped>
	.myMember {
		background-color: #F8F8F8;
		width: 750upx;
		min-height: calc(100vh - 44px);
		.header {
			position: fixed;
			top: 88upx;
			left: 0;
			width: 750upx;
			height: 102upx;
			background: #05C6AD;
			display: flex;
			z-index: 12;
			.search_box {
				width: 700upx;
				height: 54upx;
				background: #FFFFFF;
				border-radius: 27upx;
				margin: auto;
				display: flex;
				align-items: center;
				padding: 0 23upx;
				box-sizing: border-box;
				input {
					width: 100%;
					height: 100%;
					font-size: 24upx;
				}
				image {
					width: 40upx;
					height: 38upx;
					margin-right: 20upx;
				}
			}
		}
		.mainContent {
			margin: 102upx auto 0;
			padding: 24upx 0 140upx;
			.content {
				width: 702upx;
				background: #FFFFFF;
				border-radius: 22upx;
				margin: 0 auto;
				padding: 0 23upx;
				box-sizing: border-box;
				.topBox {
					display: flex;
					align-items: center;
					height: 74upx;
					border-bottom: 1upx solid #CCCCCC;
					.memberInformation {
						flex: 1;
						display: flex;
						color: #000000;
						font-size: 32upx;
						font-weight: bold;
						view:nth-child(1) {
							width: 120upx;
							overflow: hidden;    
							text-overflow:ellipsis;    
							white-space: nowrap;
						}
						text {
							margin-left: 10upx;
						}
					}
					.function {
						image {
							width: 36upx;
							height: 36upx;
						}
						image:last-child {
							margin: 0 14upx 0 32upx;
						}
					}
				}
				.bottomBox {
					display: flex;
					padding: 18upx 0 28upx 0;
					margin-bottom: 24upx;
					image {
						width: 100upx;
						height: 100upx;
						border-radius: 20upx;
					}
					.right {
						width: 526upx;
						margin-left: 24upx;
						view {
							display: flex;
							align-items: center;
							margin-top: 10upx;
							.alignment {
								text-align: justify;
								text-align-last: justify;
								display: block;
								color: #333333;
								font-size: 28upx;
								width: 120upx;
							}
							.information,.experts {
								flex: 1;
							}
							.experts {
								text {
									min-width: 98upx;
									height: 38upx;
									line-height: 38upx;
									background: #ECFFFD;
									border-radius: 19upx;
									color: #05C6AD;
									font-size: 28upx;
									text-align: center;
									margin-right: 6upx;
								}
								.more {
									min-width: 64upx;
									height: 38upx;
									line-height: 24upx;
									font-weight: bold;
								}
								.add {
									background-color: #FFFFFF;
									width: 80upx;
									image {
										width: 16upx;
										height: 16upx;
										margin-right: 4upx;
									}
									color: #05C6AD;
									font-size: 24upx;
									margin-right: 0;
								}
							}
						}
						view:nth-child(1) {
							margin-top: 0;
						}
					}
				}
			}
		}
		.location {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750upx;
			height: 135upx;
			background: url('@/static/img/quickly/healthStatus/suspensionBg@2x.png') no-repeat;
			background-size: 100% 100%;
			image {
				position: fixed;
				bottom: 26upx;
				left: 50%;
				transform: translateX(-50%);
				width: 90upx;
				height: 90upx;
			}
		}
	}
</style>
